<template>
    <div>
        <el-card class="box-card">
            <div class="avatar-box">
                <div class="avatar">
                    <img src="../assets/images/avatar/employee/logo.png" alt="">
                </div>
                <div class="avatar-info">
                    <div class="nickname">{{employeeInfo.nickname}}</div>
                    <div class="role">{{employeeInfo.role}}</div>
                </div>
            </div>
            <div class="item-card">
                <div class="item">
                    <span>用户名：</span>
                    <span>{{employeeInfo.username}}</span>
                </div>
                <div class="item">
                    <span>手机：</span>
                    <span>{{employeeInfo.mobile}}</span>
                </div>
            </div>
            <div class="item-card">
                <div class="item">
                    <span>年龄：</span>
                    <span>{{employeeInfo.age}}</span>
                </div>
                <div class="item">
                    <span>性别：</span>
                    <span>{{employeeInfo.sex}}</span>
                </div>
            </div>
        </el-card>
        
    </div>
</template>

<script>
    import {getEmployee} from '@/api/Employee'
    export default {
        name: 'Dashboard',
        data(){
            return{
                employeeInfo:{}
            }
        },
        created(){
            this.getInfo()
        },
        methods:{
            getInfo(){
                getEmployee(JSON.parse(localStorage.getItem("employeeInfo")).id).then(res=>{
                    this.employeeInfo = res.data
                    localStorage.setItem("employeeInfo",JSON.stringify(res.data))
                })
            }
        }
    }
    
</script>

<style scoped>
    .box-card {
        width: 480px;
        color:grey
    }
    .avatar-box{
        display: flex;
        justify-content: space-between;
        padding-bottom: 2%;
        border-bottom: 1px solid #efefef;
        margin-bottom: 10px
    }
    .avatar img{
        border-radius: 50%;
    }
    .avatar-info{
        margin: auto;
        margin-right: 48%;
    }
    .nickname{
        font-size: 24px;
        color:black;
    }
    .role{
        font-size: 14px;
        margin: 5px 0;
    }
    .item-card{
        margin-bottom: 10px;
        display: flex;
        justify-content: space-around;
    }
    .item{
        display: flex;
        justify-content: space-between;
    }
    span{
        width: 80px;
    }
</style>